The Scale Tool in Figma is used to resize selected objects, layers, groups, frames, images, text, and other design elements proportionally. Unlike ordinary resizing, the Scale Tool changes the dimensions of an object while also scaling its contents, such as text, strokes, and effects, by the same proportion.
The Scale Tool is especially useful when an entire design needs to become larger or smaller while maintaining its visual proportions. It is helpful for responsive design exploration, resizing illustrations, creating multiple design sizes, adapting UI screens, scaling icons, and preparing design variations.
For professional Figma learning, explore JustAcademy Figma Training and Register for Figma Course Demo.
The Scale Tool is a Figma design tool used to proportionally resize objects and their contents. It maintains the relationship between the width and height of the selected object while scaling its internal properties.
The Scale Tool can resize an object from its bounding box or by using the Scale controls in the right sidebar.
Select Object
↓
Activate Scale Tool
↓
Choose Scale Direction
↓
Drag Bounding Box
↓
Object + Contents Scale Together
The keyboard shortcut for the Scale Tool in Figma is K.
| Action | Shortcut |
|---|---|
| Scale Tool | K |
| Move Tool | V |
| Frame Tool | F |
| Rectangle Tool | R |
| Ellipse Tool | O |
| Text Tool | T |
Figma places the Scale Tool inside the Move tools menu in the toolbar. The Scale Tool is available to users with edit access to a Figma Design file. :contentReference[oaicite:0]{index=0}
The Scale Tool can be accessed from the toolbar. Open the Move tools menu and select Scale.
Figma Toolbar
↓
Move Tools
↓
Scale
↓
Select Object
↓
Scale Object
The main purpose of the Scale Tool is to resize an entire design or object proportionally while scaling its internal contents at the same time.
Scale and resize may appear similar, but they behave differently. Normal resizing changes the dimensions of the selected layer, while the Scale Tool proportionally scales the object and its contents.
| Feature | Resize | Scale Tool |
|---|---|---|
| Changes object dimensions | Yes | Yes |
| Maintains proportional relationship | Not always | Yes |
| Scales text size | Generally no | Yes |
| Scales strokes | Generally no | Yes |
| Scales effects | Generally no | Yes |
| Useful for complete design scaling | Limited | Very useful |
When you scale an object, Figma calculates the new dimensions based on the scale factor. The contents inside the object are scaled proportionally as well.
Original Size
Width = 400px
Height = 300px
Scale = 100%
↓ Scale to 50%
New Size
Width = 200px
Height = 150px
Scale = 50%
Suppose a rectangle is 400px wide and 200px high. Scaling it to 50% produces a rectangle approximately 200px wide and 100px high.
Original
┌────────────────────────────┐
│ │
│ Rectangle │
│ │
└────────────────────────────┘
400 × 200
↓ 50%
Scaled
┌──────────────┐
│ │
│ Rectangle │
│ │
└──────────────┘
200 × 100
The Scale Tool is designed to preserve the aspect ratio of the selected layer. This means that the relationship between width and height remains consistent when the object is scaled.
Original Ratio
800 : 600
↓
Scale 50%
↓
400 : 300
Aspect Ratio remains the same.
The Scale panel provides a scale multiplier that allows you to specify how much an object should be scaled.
| Multiplier | Meaning |
|---|---|
| 25% | Object becomes one-quarter of its original size. |
| 50% | Object becomes half its original size. |
| 75% | Object becomes three-quarters of its original size. |
| 100% | No size change. |
| 150% | Object becomes one and a half times larger. |
| 200% | Object becomes twice its original size. |
The Scale panel can also be used to enter a target width or height. When one dimension is changed through the Scale controls, the other dimension updates proportionally.
Original
Width = 800px
Height = 600px
Set Width = 400px
Result
Width = 400px
Height = 300px
Figma's current Scale tool documentation describes scaling through the scale multiplier or width and height fields in the Scale panel. :contentReference[oaicite:1]{index=1}
The Scale Tool includes an anchor control that determines which point of the object remains fixed while scaling.
The anchor point tells Figma where the scaling transformation originates. The selected anchor remains in position while the object scales away from that point.
Anchor = Center
↓
Object expands/shrinks
equally around center
Anchor = Top Left
↓
Top-left position stays fixed
Object scales toward bottom-right
When the center is selected as the anchor point, the center of the object remains fixed while the object scales outward or inward.
Before
┌──────────────┐
│ │
│ ● │
│ │
└──────────────┘
After Scaling
┌────────────────────┐
│ │
│ ● │
│ │
└────────────────────┘
● = Fixed Center
When the top-left anchor is selected, the top-left point remains fixed while the object scales toward the opposite direction.
●────────────
│
│ Object
│
└────────────
Here the top-left point acts as the fixed reference point.
The Scale Tool is particularly useful for groups of objects. Instead of resizing each individual element, you can select the complete group and scale it together.
Group
│
├── Icon
├── Text
├── Button
├── Image
└── Decoration
↓ Scale 75%
Everything scales together.
You can select multiple layers and use the Scale Tool to transform the selected design elements as a group.
The Scale Tool can scale a text layer's bounds and font size together. This is useful when text needs to remain proportionally related to other design elements.
For example, if a heading is 32px and the complete design is scaled to 50%, the text can scale to approximately 16px as part of the transformation.
Original
Heading = 32px
Scale = 50%
Result
Heading ≈ 16px
Figma specifically notes that the Scale Tool can change both the bounds and font size of a text layer. :contentReference[oaicite:2]{index=2}
| Scale Tool | Font Size Property |
|---|---|
| Changes text bounds and font size. | Changes the font size of the text content. |
| Useful for scaling complete designs. | Useful for typography adjustments. |
| Can produce fractional font sizes. | Provides more direct control over typography. |
| Useful when text must scale with surrounding elements. | Useful when maintaining typography specifications. |
For normal typography adjustments, changing the font size directly is generally more predictable than scaling the entire text layer. Figma notes that scaling can produce fractional font sizes or subpixel dimensions. :contentReference[oaicite:3]{index=3}
One of the important differences between normal resizing and scaling is how strokes behave. The Scale Tool scales the stroke properties along with the object's dimensions.
Original
Shape = 200 × 200
Stroke = 4px
Scale = 50%
Result
Shape = 100 × 100
Stroke ≈ 2px
Figma's documentation distinguishes normal resizing, which can retain stroke weight, from the Scale Tool, which scales stroke properties with the object. :contentReference[oaicite:4]{index=4}
Effects applied to an object can also scale when using the Scale Tool. This is useful when an object has shadows, blurs, or other visual effects that should remain visually proportional to the object.
Object
+
Shadow
+
Blur
+
Stroke
↓ Scale
Object
+
Scaled Shadow
+
Scaled Blur
+
Scaled Stroke
The Scale Tool can be used to scale image layers and objects containing image fills. The image's appearance depends on the fill mode used by the layer.
Figma applies images as fills, so scaling the object scales the object containing the image while the selected fill mode controls how the image is positioned within it. :contentReference[oaicite:5]{index=5}
Maintaining the aspect ratio is one of the primary advantages of the Scale Tool. This prevents accidental stretching or squashing of proportional designs.
Correct Scaling
Original: 400 × 300
50% : 200 × 150
75% : 300 × 225
150% : 600 × 450
200% : 800 × 600
The Scale Tool can be used to quickly create visual variations of a UI screen. For example, a designer can duplicate a desktop mockup and scale the copy to create a smaller visual reference.
Desktop UI
1440 × 900
↓
Scale
↓
720 × 450
↓
Review Layout
↓
Create Design Variation
However, scaling a complete UI is not the same as creating a responsive layout. Responsive interfaces should still be tested using appropriate frames, constraints, auto layout, and component behavior.
Illustrations often contain many shapes, paths, strokes, and effects. Scaling the entire illustration manually can be time-consuming. The Scale Tool allows the complete illustration to be transformed together.
Illustration
│
├── Head
├── Body
├── Eyes
├── Hair
├── Clothes
└── Accessories
↓ Scale 60%
Complete illustration
scaled proportionally.
Icons can contain multiple paths and strokes. Scaling the icon as a complete selection can help maintain the proportions of the icon artwork.
24 × 24 Icon
↓
Scale 200%
↓
48 × 48 Icon
When preparing production icons, always verify stroke thickness, pixel alignment, optical appearance, and export requirements after scaling.
Logos can contain multiple shapes, paths, and strokes. The Scale Tool can be used to create visual size variations while preserving the overall proportions.
Logo
↓
Select Complete Logo
↓
Press K
↓
Scale
↓
Small Logo
Medium Logo
Large Logo
A card containing text, icons, buttons, and decorative elements can be scaled as a complete group when creating a visual variation.
Card
┌──────────────────────┐
│ Icon │
│ │
│ Product Title │
│ Description │
│ │
│ [ Buy Now ] │
└──────────────────────┘
↓ Scale
┌───────────────┐
│ Icon │
│ Product │
│ Description │
│ [Buy] │
└───────────────┘
The Scale Tool can be useful when working with component-based designs, but designers should understand the difference between scaling a visual instance and changing the underlying component structure.
When designing production interfaces, use component properties, auto layout, constraints, and responsive patterns where appropriate rather than relying on scaling for every layout requirement.
Auto Layout and Scale solve different problems.
| Scale | Auto Layout |
|---|---|
| Changes the overall size proportionally. | Controls layout relationships between children. |
| Scales contents. | Arranges contents based on layout rules. |
| Useful for visual transformation. | Useful for responsive component behavior. |
| Can scale typography and strokes. | Does not simply scale everything proportionally. |
The Scale Tool can scale objects proportionally while ignoring constraints on nested layers. This makes it useful when you need the entire composition to scale as a single visual unit. :contentReference[oaicite:6]{index=6}
Frame
│
├── Header
├── Image
├── Text
├── Button
└── Footer
↓ Scale Tool
Complete composition
scales proportionally.
The Scale Tool can help create visual size variations, but it should not be considered a replacement for responsive layout techniques.
For a real responsive design, use:
Suppose a landing page design is 1440px wide. You can duplicate the design and use the Scale Tool to create a visual 50% version.
Landing Page
1440 × 900
↓
Duplicate
↓
Scale 50%
↓
720 × 450
This can be useful for presentations or visual comparisons, but the scaled design should not automatically be treated as the production responsive implementation.
Designers can use the Scale Tool when adapting graphics for presentations, social media artwork, banners, or other visual compositions.
Original Graphic
1200 × 800
↓
Scale 75%
↓
900 × 600
Suppose a promotional banner contains a heading, paragraph, button, icon, and decorative shape. Selecting all elements and scaling them together keeps their visual relationships intact.
Banner
│
├── Heading
├── Description
├── Button
├── Icon
└── Decoration
↓
Scale 80%
↓
All elements become
80% of their original size.
Stroke weight is an important consideration when scaling illustrations and icons. Normal resizing can preserve stroke weight, while the Scale Tool scales the stroke along with the object.
| Operation | Object | Stroke |
|---|---|---|
| Normal Resize | Changes | Can remain unchanged |
| Scale Tool | Changes | Scales proportionally |
Blur effects can also scale with the object when using the Scale Tool. This can be useful when an illustration or graphic has a visual effect that should remain proportional to the artwork.
Original
Object + 20px Blur
Scale 50%
Result
Object + proportionally scaled Blur
Designers frequently need different visual sizes of the same composition. The Scale Tool makes this process faster.
| Version | Scale |
|---|---|
| Original | 100% |
| Small | 50% |
| Medium | 75% |
| Large | 125% |
| Extra Large | 150% |
Identify Object
↓
Select Object
↓
Press K
↓
Check Bounding Box
↓
Choose Anchor Point
↓
Drag Handle or Enter Scale
↓
Review Result
↓
Check Text
↓
Check Strokes
↓
Check Effects
↓
Finalize Design
The Scale panel provides more precise control than dragging the bounding box manually. You can enter a scale multiplier or use dimension fields.
Original
Width = 1000px
Height = 800px
Required Scale = 40%
Calculation
1000 × 0.40 = 400px
800 × 0.40 = 320px
Result
400 × 320px
The basic scaling formula is:
New Size = Original Size × Scale FactorFor example:
Original Width = 600px
Scale = 75%
600 × 0.75 = 450px
New Width = 450px
Scaling up means increasing the dimensions of an object.
Original
300 × 200
Scale = 150%
300 × 1.5 = 450
200 × 1.5 = 300
Result
450 × 300
Scaling down means reducing the dimensions of an object.
Original
800 × 600
Scale = 50%
800 × 0.5 = 400
600 × 0.5 = 300
Result
400 × 300
Scaling an object to 200% doubles its dimensions.
Original
500 × 300
200%
500 × 2 = 1000
300 × 2 = 600
Result
1000 × 600
Scaling an object to 25% reduces both dimensions to one-quarter of their original values.
Original
800 × 400
25%
800 × 0.25 = 200
400 × 0.25 = 100
Result
200 × 100
Scaling can sometimes produce fractional dimensions, font sizes, or positions. This can matter for pixel-perfect UI designs and exports.
Example
Original = 333px
Scale = 70%
333 × 0.70 = 233.1px
After scaling, inspect important UI dimensions and exported assets where exact pixel values are required.
When text is scaled, the resulting font size may not be a whole number. For example, 17px scaled to 75% results in 12.75px.
17px × 0.75 = 12.75pxThis is one reason to use direct typography controls when the goal is to establish a specific production font size rather than proportionally scale an entire composition. :contentReference[oaicite:7]{index=7}
After scaling a design, always verify export dimensions. Scaling the Figma layer and exporting at a particular export multiplier are separate concepts.
Design Layer Size
↓
Scale Tool
↓
Final Layer Dimensions
↓
Export Settings
↓
PNG / JPG / SVG / PDF
The Scale Tool can be useful for creating variations of promotional graphics, but the target canvas should still be considered before scaling.
Master Artwork
↓
Duplicate
↓
Scale Artwork
↓
Place on Target Frame
↓
Review Text and Safe Areas
↓
Export
Marketing banners often contain multiple elements that need to remain visually consistent. Scaling the entire composition can be useful when producing an alternate visual size.
The Scale Tool can be used to resize wireframe compositions for presentation or documentation. However, interactive layout behavior should be tested separately when converting a wireframe into a responsive design.
When preparing prototype screens, designers may scale visual compositions for presentation. Scaling should be checked carefully so that important interactive areas and visual hierarchy remain appropriate.
A component containing text, icons, and shapes can be visually scaled as a complete composition. However, production components should generally be designed with appropriate layout rules so that they can adapt to different content and screen sizes.
The Scale Tool can be useful for creating visual references, illustrations, or marketing compositions within a design system. It should not replace the system's defined spacing, typography, component, and token rules.
Scaling a complete composition helps preserve the relative proportions between its elements.
Icon : 24px
Text : 16px
Button Height : 48px
Scale 50%
Icon : 12px
Text : 8px
Button Height : 24px
Groups can contain several objects. When a group is selected and scaled, the complete visual composition can be transformed together.
Group
├── Rectangle
├── Circle
├── Text
└── Icon
↓ Scale 80%
Group
├── Smaller Rectangle
├── Smaller Circle
├── Smaller Text
└── Smaller Icon
Locked layers cannot be scaled directly. If an object needs to be transformed, make sure the relevant layer is editable and unlocked.
Figma's current documentation notes that locked layers and layers nested inside a component instance cannot be scaled directly with the Scale Tool. :contentReference[oaicite:8]{index=8}
| Mistake | Problem | Solution |
|---|---|---|
| Using normal resize for complete artwork | Contents may not scale proportionally. | Use the Scale Tool. |
| Scaling UI instead of using responsive rules | Layout may not adapt correctly. | Use Auto Layout and constraints where appropriate. |
| Ignoring text size | Font size may become fractional. | Review typography after scaling. |
| Ignoring strokes | Stroke thickness may change. | Check stroke weight after scaling. |
| Ignoring effects | Blur or shadows may change. | Review effects. |
| Scaling without checking pixels | Fractional dimensions can occur. | Inspect important dimensions. |
| Feature | Scale Tool | Auto Layout | Normal Resize |
|---|---|---|---|
| Main purpose | Proportional transformation | Responsive layout | Dimension adjustment |
| Scales text | Yes | No, not simply as a scale operation | No |
| Scales strokes | Yes | No, not simply as a scale operation | Can preserve stroke weight |
| Useful for responsive UI | Limited | Excellent | Limited |
| Useful for illustrations | Excellent | Not primary purpose | Limited |
| Maintains proportions | Yes | Uses layout rules | Depends on resizing method |
Suppose a login screen has a logo, heading, email field, password field, button, and background illustration.
Login Screen
│
├── Logo
├── Heading
├── Email Field
├── Password Field
├── Login Button
└── Illustration
Original = 1440 × 900
↓
Duplicate Screen
↓
Scale = 75%
↓
Review all elements
The Scale Tool can quickly create a proportional visual version, while a production responsive implementation should still use appropriate layout rules.
Original Logo
400 × 120
Required Version
200 × 60
Scale Factor
50%
400 × 0.5 = 200
120 × 0.5 = 60
The resulting logo maintains its original aspect ratio.
Suppose an icon set is designed at 24px and a larger presentation requires 48px icons.
24px Icon
↓
Scale 200%
↓
48px Icon
After scaling, inspect the strokes and alignment because visual clarity can change at different sizes.
Marketing Card
600 × 400
↓
Scale 80%
↓
480 × 320
Because the entire composition scales together, the relationship between the image, title, button, spacing, and decoration remains proportional.
Project Objective: Create multiple visual versions of a promotional banner using the Scale Tool.
1200 × 600Scale 75%
1200 × 0.75 = 900
600 × 0.75 = 450
Result = 900 × 450
Scale 50%
1200 × 0.50 = 600
600 × 0.50 = 300
Result = 600 × 300
Scale 25%
1200 × 0.25 = 300
600 × 0.25 = 150
Result = 300 × 150
Create Master Banner
↓
Group Related Elements
↓
Duplicate Master
↓
Press K
↓
Set Scale
↓
Review Typography
↓
Review Strokes
↓
Review Effects
↓
Check Dimensions
↓
Place in Target Frame
↓
Export
| Tool | Shortcut | Purpose |
|---|---|---|
| Move | V | Select and move objects |
| Scale | K | Scale objects proportionally |
| Frame | F | Create frames |
| Rectangle | R | Create rectangles |
| Ellipse | O | Create circles and ellipses |
| Text | T | Create text layers |
The Scale Tool is used to proportionally resize objects and their contents in Figma.
The shortcut is K.
Scale proportionally transforms the object and its contents, while normal resizing changes dimensions without necessarily scaling internal properties.
Yes. Scaling a text layer changes its bounds and font size together.
Yes. The Scale Tool scales stroke properties along with the object.
Effects such as blur can scale with the object when using the Scale Tool.
An anchor point determines the point that remains fixed while an object is scaled.
It can create proportional visual variations, but it should not replace responsive techniques such as Auto Layout and constraints.
Yes. Scaling can result in fractional font sizes or subpixel dimensions.
It allows multiple shapes, paths, strokes, and effects to be scaled together while preserving their visual relationships.
Design Master
↓
Duplicate
↓
Select Complete Composition
↓
Press K
↓
Set Anchor
↓
Apply Scale
↓
Inspect Text
↓
Inspect Strokes
↓
Inspect Effects
↓
Check Pixel Values
↓
Finalize
↓
Export
The Figma Scale Tool is an important transformation tool for designers who need to resize complete objects and compositions proportionally. Its major advantage is that it scales the object together with important visual properties such as text, strokes, and effects, making it especially useful for illustrations, icons, logos, banners, marketing graphics, and complete visual compositions.
The Scale Tool should be understood separately from normal resizing and responsive layout techniques. Use Scale when the goal is proportional transformation, use Auto Layout and constraints when the goal is responsive behavior, and use direct typography controls when precise font sizes are required.
With the shortcut K, the Scale Tool can become a fast part of a professional Figma workflow. Always review typography, strokes, effects, pixel dimensions, and export requirements after scaling.
For structured Figma learning and practical design training, visit JustAcademy Figma Training and Register for Figma Course Demo.
